<template>
  <div class="question-number">
    <!-- 单选 -->
    <div class="radio topic" v-show="radioLength != 0">
      <p>一、单选</p>
      <div class="listArea">
        <div class="list" v-for="item in radioLength">{{ item }}</div>
      </div>
    </div>

    <!-- 多选 -->
    <div class="multiple topic" v-show="multipleLength != 0">
      <p>二、多选</p>
      <div class="listArea">
        <div class="list" v-for="item in multipleLength">{{ item }}</div>
      </div>
    </div>

    <!-- 判断 -->
    <div class="judge topic" v-show="judgeLength != 0">
      <p>三、判断</p>
      <div class="listArea">
        <div class="list" v-for="item in judgeLength">{{ item }}</div>
      </div>
    </div>

    <!-- 填空 -->
    <div class="filling topic" v-show="fillLength != 0">
      <p>四、填空</p>
      <div class="listArea">
        <div class="list" v-for="item in fillLength">{{ item }}</div>
      </div>
    </div>

    <!-- 综合 -->
    <div class="synthesize topic" v-show="synthesizeLength != 0">
      <p>五、综合</p>
      <div class="listArea">
        <div class="list" v-for="item in synthesizeLength">{{ item }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import Bus from '@/common/bus';

export default {
  name: 'examTotal',
  data() {
    return {
      radioLength: 0,
      multipleLength: 0,
      judgeLength: 0,
      fillLength: 0,
      synthesizeLength: 0,
    };
  },
  created() {
    this._initRadioTab();
  },
  mounted() {
    this._topicOk();
  },
  methods: {
    _initRadioTab() {
      Bus.$on('initTab', (tab) => {
        this.radioLength = tab[0]; /* 初始化单选题题号数 */
        this.multipleLength = tab[1]; /* 初始化多选题题号数 */
        this.judgeLength = tab[2]; /* 初始化判断题题号数 */
        this.fillLength = tab[3]; /* 初始化填空题题号数 */
        this.synthesizeLength = tab[4]; /* 初始化填空题题号数 */
      });
    },

    _topicOk() {
      // 单选题完成题题号数
      Bus.$on('radioTopic', (finishData) => {
        const radiolists = document.querySelectorAll('.radio .list');
        this.topicOk(radiolists, finishData);
      });

      // 多选题完成题题号数
      Bus.$on('multipleTopic', (finishData) => {
        const multiplelists = document.querySelectorAll('.multiple .list');
        this.topicOk(multiplelists, finishData);
      });

      // 判断题完成题题号数
      Bus.$on('judgeTopic', (finishData) => {
        const judgelists = document.querySelectorAll('.judge .list');
        this.topicOk(judgelists, finishData);
      });

      // 填空题完成题题号数
      Bus.$on('fillTopic', (finishData) => {
        const fills = document.querySelectorAll('.filling .list');
        this.topicOk(fills, finishData);
      });

      // 综合题完成题题号数
      Bus.$on('synthesizeTopic', (finishData) => {
        const synthesizelists = document.querySelectorAll('.synthesize .list');
        this.topicOk(synthesizelists, finishData);
      });
    },

    topicOk(obj, data) {
      var iid = data.num - 1;

      if (data.finish) {
        obj[iid].classList.add('finish');
      } else {
        obj[iid].classList.remove('finish');
      }
    },
  },
  beforeDestroy() {
    Bus.$off('initTab');

    Bus.$off('radioTopic');
    Bus.$off('multipleTopic');
    Bus.$off('judgeTopic');
    Bus.$off('fillTopic');
    Bus.$off('synthesizeTopic');
  },
};
</script>

<style scoped>
.question-number {
  position: sticky;
  top: 10px;
  min-width: 270px;
  max-width: 300px;
  height: 100%;
  margin-right: 20px;
  padding: 30px;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0 2px 10px 0 #edeef080;

  display: flex;
  flex-direction: column;
}
.topic {
  width: 100%;
  margin: 8px 0;
  display: flex;
  flex-direction: column;
}
.topic > p {
  text-indent: 1rem;
}

.listArea {
  display: flex;
  flex-wrap: wrap;
}
.list {
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  border: 1px solid #adcfff;
  color: burlywood;
  margin: 6px;
  background: #fff;
  border-radius: 6px;
  transition: all 0.3s;
}
.finish {
  background: #e6f0ff;
}
.current,
.list:hover {
  background-color: #3a8bff;
  color: #e6f0ff;
}
</style>